<template>
    <view>
        <view class="we7-bottom" :style="'background-color:' + tabBar.backgroundColor + ';border-color:' + tabBar.borderStyle" v-if="tabBar">
            <block v-for="(item, index) in tabBar.list" :key="index">
                <view class="we7-bottom-item" hoverClass="active" v-if="item.pageUrl == '/' + thisurl">
                    <navigator hoverClass="active" openType="redirect" :url="item.pagePath">
                        <image class="item-img" mode="widthFix" :src="item.selectedIconPath"></image>
                        <view class="item-text" :style="'color: ' + tabBar.selectedColor + ';'">{{ item.text }}</view>
                    </navigator>
                </view>

                <view class="we7-bottom-item" hoverClass="active" v-else>
                    <navigator hoverClass="active" openType="redirect" :url="item.pagePath">
                        <image class="item-img" mode="widthFix" :src="item.iconPath"></image>
                        <view class="item-text" :style="'color: ' + tabBar.tabBarcolor">{{ item.text }}</view>
                    </navigator>
                </view>
            </block>
        </view>
        <view class="we7-bottom-placeholder"></view>
    </view>
</template>

<script>
var app = getApp();
export default {
    data() {
        return {
            thisurl: ''
        };
    },
    props: {
        tabBar: {
            type: Object,
            default: app.globalData.tabBar
        }
    },
    methods: {},
    created: function () {}
};
</script>
<style>
@import './footer.css';
</style>
